<template>
  <div class="content tab_cont">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="充币记录" name="first">
        <el-table
        v-loading='showLoading'
        max-height='500'
        :header-cell-style="{'background-color':'#ffffff','font-weight':'bold'}"
        :data='myEnstrumentData'
      > 
        <el-table-column
          :label='"时间"'>
          <template slot-scope="scope">
            {{scope.row.wdate}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"币种"'>
          <template slot-scope="scope">
            {{scope.row.coin}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"数量"'>
          <template slot-scope="scope">
            {{parseFloat(scope.row.number)}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"哈希值"' >
          <template slot-scope="scope">
            {{scope.row.hash}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"手续费"' >
          <template slot-scope="scope">
            {{scope.row.gas}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"实际数量	"' >
          <template slot-scope="scope">
            {{scope.row.lastnumber}}
          </template>
        </el-table-column>
        <el-table-column
          sortable
          width='80'
          :label='"状态"'
        >
          <span
            slot-scope="scope"
            class="color-red"
            v-text="scope.row.state=='sending'?'审核中':(scope.row.state=='completed'?'已完成':'已驳回')"
          ></span>
        </el-table-column>
      </el-table>
      </el-tab-pane>
      <el-tab-pane label="提币记录" name="second">
        <el-table
        v-loading='showLoading'
        max-height='500'
        :header-cell-style="{'background-color':'#ffffff','font-weight':'bold'}"
        :data='myEnstrumentData'
      > 
        <el-table-column
          :label='"时间"'>
          <template slot-scope="scope">
            {{scope.row.wdate}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"币种"'>
          <template slot-scope="scope">
            {{scope.row.coin}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"数量"'>
          <template slot-scope="scope">
            {{parseFloat(scope.row.number)}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"哈希值"' >
          <template slot-scope="scope">
            {{scope.row.hash}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"手续费"' >
          <template slot-scope="scope">
            {{scope.row.gas}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"实际数量	"' >
          <template slot-scope="scope">
            {{scope.row.lastnumber}}
          </template>
        </el-table-column>
        <el-table-column
          sortable
          width='80'
          :label='"状态"'
        >
          <span
            slot-scope="scope"
            class="color-red"
            v-text="scope.row.state=='sending'?'审核中':(scope.row.state=='completed'?'已完成':'已驳回')"
          ></span>
        </el-table-column>
      </el-table>
      </el-tab-pane>
      <!-- 划转记录 -->
      <el-tab-pane label="划转记录" name="third">
        <el-table
        v-loading='showLoading'
        max-height='500'
        :header-cell-style="{'background-color':'#ffffff','font-weight':'bold'}"
        :data='myEnstrumentData'
      > 
        <el-table-column
          :label='"时间"'>
          <template slot-scope="scope">
            {{scope.row.wdate}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"币种"'>
          <template slot-scope="scope">
            {{scope.row.coin}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"数量"'>
          <template slot-scope="scope">
            {{parseFloat(scope.row.number)}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"哈希值"' >
          <template slot-scope="scope">
            {{scope.row.hash}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"手续费"' >
          <template slot-scope="scope">
            {{scope.row.gas}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"实际数量	"' >
          <template slot-scope="scope">
            {{scope.row.lastnumber}}
          </template>
        </el-table-column>
        <el-table-column
          sortable
          width='80'
          :label='"状态"'
        >
          <span
            slot-scope="scope"
            class="color-red"
            v-text="scope.row.state=='sending'?'审核中':(scope.row.state=='completed'?'已完成':'已驳回')"
          ></span>
        </el-table-column>
      </el-table>
      </el-tab-pane>
      <!-- 其它记录 -->
      <el-tab-pane label="其它记录" name="fourth">
        <el-table
        v-loading='showLoading'
        max-height='500'
        :header-cell-style="{'background-color':'#ffffff','font-weight':'bold'}"
        :data='myEnstrumentData'
      > 
        <el-table-column
          :label='"时间"'>
          <template slot-scope="scope">
            {{scope.row.wdate}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"币种"'>
          <template slot-scope="scope">
            {{scope.row.coin}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"数量"'>
          <template slot-scope="scope">
            {{parseFloat(scope.row.number)}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"哈希值"' >
          <template slot-scope="scope">
            {{scope.row.hash}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"手续费"' >
          <template slot-scope="scope">
            {{scope.row.gas}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"实际数量	"' >
          <template slot-scope="scope">
            {{scope.row.lastnumber}}
          </template>
        </el-table-column>
        <el-table-column
          sortable
          width='80'
          :label='"状态"'
        >
          <span
            slot-scope="scope"
            class="color-red"
            v-text="scope.row.state=='sending'?'审核中':(scope.row.state=='completed'?'已完成':'已驳回')"
          ></span>
        </el-table-column>
      </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showLoading: true,
      myEnstrumentData: [],
      activeName: 'first',
      tabtype:'in',
    };
  },
  mounted() {
    this.routeModel.assetsRoutes = {
      i18nKey: "financialRecord",
      title: this.$route.meta.title || "",
      path: this.$route.path
    };
    //获取充币记录
    this.getRecord(this.tabtype);
    // this.onTabClick(0,'getmyput')getmyrecharge
  },
  beforeRouteLeave(to, from, next) {
    this.routeModel.assetsRoutes = null;
    next();
    
  },
  methods: {
    handleClick(tab, event) {
        console.log(tab, event);
        console.log(tab.index);
        let tabindex=tab.index;
        if(tabindex==0){
          this.tabtype='in';
          this.getRecord(this.tabtype);
        }else if(tabindex==1){
          this.tabtype='out';
          this.getRecord(this.tabtype);
        }else if(tabindex==2){
          this.tabtype='transfer';
          this.getRecord(this.tabtype);
        }else if(tabindex==3){
          this.tabtype='system';
          this.getRecord(this.tabtype);
        }
    },
    onTabClick(i, apiUrl) {
      this.currentIndex = i;
      this.getRecord(this.api[apiUrl]);
    },
    getRecord(tabtype) {
      this.showLoading = true;
      let postdata={
            type:this.tabtype,
            coin:'',
            page:'1',
            limit:'60',
      }
      return this.request(this.api.finance_type,postdata).then(res => {
          if (res.code == 0) {
            this.successMsg(res.msg);
            this.showLoading = false;
            this.myEnstrumentData=res.data;
          } else {
            this.showLoading = false;
            this.errMsg(res.msg);
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.table-wrap {
  // border: $default-border;
  border-bottom: none;
}
.title {
  padding-bottom: 15px;
  margin-bottom: 10px;
  color:$hb-acor;
  border-bottom: 1px solid #eeeeee;
}
.tab_cont{
  min-height: 700px;
}
</style>